<template>
  <div class="home-page">
    <!-- 健身房优点 -->
    <section class="advantages">
      <h2>我们的优势</h2>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="advantage-item">
            <h3>先进设备</h3>
            <p>我们配备了最先进的健身设备，满足您的各种需求。</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="advantage-item">
            <h3>专业团队</h3>
            <p>
              我们的团队由经验丰富的健身教练和管理人员组成，为您提供专业的服务。
            </p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="advantage-item">
            <h3>舒适环境</h3>
            <p>我们提供舒适的健身环境，让您在愉悦的氛围中锻炼身体。</p>
          </div>
        </el-col>
      </el-row>
    </section>

    <!-- 金牌教练 -->
    <section class="coaches">
      <h2>金牌教练</h2>
      <el-row :gutter="20">
        <el-col :span="6" v-for="coach in goldCoaches" :key="coach.id">
          <div class="coach-card">
            <img :src="coach.avatar" :alt="coach.name" class="coach-avatar" />

            <h3>{{ coach.name }}</h3>
            <p>{{ coach.description }}</p>
          </div>
        </el-col>
      </el-row>
    </section>

    <!-- 主要课程 -->
    <section class="courses">
      <h2>主要课程</h2>
      <el-row :gutter="20">
        <el-col :span="6" v-for="course in mainCourses" :key="course.id">
          <div class="course-card">
            <img :src="course.image" :alt="course.name" class="course-image" />
            <h3>{{ course.name }}</h3>
            <p>{{ course.description }}</p>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const activeIndex = ref("1");

const goldCoaches = ref([
  {
    id: 1,
    name: "李教练",
    avatar: "../../assets/imgs/preview.jpg",
    description: "拥有10年健身教练经验，擅长力量训练和减脂塑形。",
  },
  {
    id: 2,
    name: "王教练",
    avatar: "https://example.com/images/coach2.jpg",
    description: "专业瑜伽教练，帮助学员提升柔韧性和核心力量。",
  },
  {
    id: 3,
    name: "张教练",
    avatar: "https://example.com/images/coach3.jpg",
    description: "资深有氧运动教练，指导学员进行高效的心肺训练。",
  },
  {
    id: 4,
    name: "赵教练",
    avatar: "https://example.com/images/coach4.jpg",
    description: "专注于功能性训练，帮助学员提高运动表现。",
  },
]);

const mainCourses = ref([
  {
    id: 1,
    name: "力量训练",
    image: "https://example.com/images/course1.jpg",
    description: "全面提升肌肉力量，塑造完美体型。",
  },
  {
    id: 2,
    name: "瑜伽课程",
    image: "https://example.com/images/course2.jpg",
    description: "放松身心，增强柔韧性，提升核心力量。",
  },
  {
    id: 3,
    name: "有氧运动",
    image: "https://example.com/images/course3.jpg",
    description: "提高心肺功能，燃烧多余脂肪，增强体能。",
  },
  {
    id: 4,
    name: "功能性训练",
    image: "https://example.com/images/course4.jpg",
    description: "提升运动表现，减少受伤风险，增强整体协调性。",
  },
]);

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>
<style scoped>
.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f0f2f5;
}

.nav-menu {
  width: 100%;
  max-width: 1200px;
  background-color: #303133;
  color: white;
}

.carousel {
  width: 100%;
  max-width: 1200px;
  margin: 20px 0;
}

.carousel-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.advantages {
  max-width: 1200px;
  width: 100%;
  margin-bottom: 40px;
}

.advantage-item {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}

.advantage-item h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #303133;
}

.advantage-item p {
  font-size: 14px;
  color: #606266;
}

.coaches,
.courses {
  max-width: 1200px;
  width: 100%;
  margin-bottom: 40px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.coaches h2,
.courses h2 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #303133;
}

.coach-card,
.course-card {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-bottom: 20px;
}

.coach-avatar,
.course-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
}

.coach-card h3,
.course-card h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #303133;
}

.coach-card p,
.course-card p {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}
</style>

